<template>
  <div class="welcome">
    <div class="tool">
      <h4 class="mapTitle">欢迎您,{{ admin }}</h4>
      <div class="mapInfo">为您带来今天的疫情信息</div>
      <div class="china">中国</div>
    </div>
    <div class="center" align="center" id="mapbox" style="height: 500px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "../../utils/china"; //import中国地图
import jsonp from "jsonp";
export default {
  name: "chinaMap",
  data() {
    return {
      admin: "admin",
      myChart: null,
      option: {
        title: {
          text: "中国疫情地图 (数据来源新浪,仅供参考)",
          subtext: `截至${new Date().toLocaleDateString()}  现有确诊`,
          x: "center",
          textStyle: {
            fontWeight: "bold",
            fontSize: 16,
            color: "red",
          },
          subtextStyle: {
            fontSize: 12,
            color: "#aaa",
          },
          //textAlign: 'left'
        },
        visualMap: [
          {
            type: "piecewise",
            show: true,
            pieces: [
              //图例
              { min: 10000, color: "red" },
              { min: 1000, max: 9999, color: "orange" },
              { min: 100, max: 999, color: "yellow" },
              { min: 10, max: 99, color: "green" },
              { min: 1, max: 9, color: "pink" },
              { value: 0, color: "lightgray" },
            ],
            inRange: {
              symbol: "square",
              // symbolSize: ,
              color: ["#ffc0b1", "#9c0505"],
            },
            itemWidth: 30,
            itemHeight: 20,
          },
        ],
        tooltip: {
          trigger: "item", //提示框
        },
        toolbox: {
          show: true,
          //orient: 'vertical',
          itemSize: 25,
          itemGap: 20,
          feature: {
            dataView: { readOnly: true },
            saveAsImage: {
              name: "国内疫情地图",
            },
          },
        },
        series: [
          {
            name: "确诊人数",
            type: "map", //echats要渲染的是地图类型
            map: "china", //渲染中国地图
            label: {
              //控制对应地区的汉字
              show: true,
              color: "black", //控制地区字体颜色
              fontSize: 12,
            },
            itemStyle: {
              //地图区域
              areaColor: "sgray",
            },
            roam: "scale", //用户可根据滑轮缩放地图
            zoom: 1.25, //放大或缩小地图
            emphasis: {
              //控制高亮区域：鼠标位置
              label: {
                color: "black",
                fontSize: 14,
              },
              itemStyle: {
                areaColor: "#83b5e7",
              },
            },
            data: [],
          },
        ],
      },
    };
  },
  created() {},
  mounted() {
    this.myChart = echarts.init(document.getElementById("mapbox"));
    this.get_Data();
  },

  methods: {
    get_Data() {
      //使用数据接口获取json数据包
      jsonp(
        "https://gwpre.sina.cn/interface/fymap2020_data.json?_=1590550575291&callback=dataAPIData",
        {},
        (err, data) => {
          if (!err) {
            //代表请求数据成功
            let list = data.data.list.map((item) => ({
              name: item.name,
              value: item.value,
            }));
            this.option.series[0].data = list;
            this.myChart.setOption(this.option);
          }
        }
      );
    },
  },
};
</script>

<style>
.welcome {
  width: 100%;
  position: relative;
}
.tool {
  position: absolute;
  top: 0;
  left: 0;
}
#center {
  text-align: center;
  margin: 0 auto;
  width: 80%;
}
.china {
  color: blue;
  margin-top: 10px;
  text-indent: 1em;
}
.mapInfo {
  margin-top: 10px;
}
</style>